<template>
    <div class="page2">
        <el-menu theme="dark" :default-active="activeIndex" class="el-menu-demo" mode="horizontal"
                 @select="handleSelect">
            <el-menu-item index="1">Hi~welcome to you</el-menu-item>
            <el-submenu index="2" class="login-info">
                <template slot="title">我的工作台</template>
                <el-menu-item index="2-1">选项1</el-menu-item>
                <el-menu-item index="2-2">退出</el-menu-item>
            </el-submenu>
        </el-menu>
        <div class="nav-left">
            <div class="user-img">
                <img src="../images/logo.jpg" alt="">
            </div>
            <el-col>
                <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
                    <router-link to="text1">
                        <el-menu-item index="1"><i class="el-icon-menu"></i>首页</el-menu-item>
                    </router-link>
                    <router-link to="text2">
                        <el-menu-item index="2"><i class="el-icon-setting"></i>博客</el-menu-item>
                    </router-link>
                    <el-submenu index="3">
                        <template slot="title"><i class="el-icon-message"></i>其他</template>
                        <el-menu-item-group>
                            <router-link to="mes">
                                <el-menu-item index="1-1">留言</el-menu-item>
                            </router-link>
                            <el-menu-item index="1-2">API文档</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </el-col>
        </div>
        <div class="info">
            <router-view></router-view>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'page2',
        data() {
            return {
                activeIndex: '1',
                activeIndex2: '1'
            };
        },
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClick(tab, event) {
                if(tab.name=='first'){
                    this.$help.$emit('getlist');
                }else if(tab.name == 'second'){
                    this.$help.$emit('new')
                }
            }
        }
    }
</script>
<style lang="scss">
    .page2 {
        height: 100%;
        .login-info {
            float: right;
            margin-right: 20px;
            .el-menu {
                left: -50%;
                margin-left: 40px;
            }
        }
        .nav-left {
            float: left;
            width: 30%;
            min-height: 100%;
            padding-top: 60px;
            background: #eef1f6;
        }
        .info {
            float: left;
            width: 69%;
            padding-top: 40px;
        }
    }
</style>